<template>
<div id="scrollList">
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title">我的订单</h2>
  </header>
  <div class="displayflex top-bar-w">
    <div class="top-bar-c flex1">
      <i class="iconfont icon-sech"></i> 
      <div class="ipt"><input type="text" placeholder="输入订单编号" v-model="bbillno"></div>
    </div> 
    <div class="btn-sech" @click="resetGet()">搜索</div>
  </div>
  <tab :line-width='2'
       class="lltab">
    <tab-item :selected="selectedNum=='1'"
      @on-item-click="goLink(1)">待发单</tab-item>
    <tab-item :selected="selectedNum=='2'"
      @on-item-click="goLink(2)">已派单</tab-item>
    <tab-item :selected="selectedNum=='3'"
      @on-item-click="goLink(3)">配送中</tab-item>
      <tab-item :selected="selectedNum=='4'"
      @on-item-click="goLink(4)">已送达</tab-item>
    <tab-item :selected="selectedNum=='5'"
      @on-item-click="goLink(5)">已签收</tab-item>
     <tab-item :selected="selectedNum=='6'"
      @on-item-click="goLink(6)">异常</tab-item>
  </tab>
  <scroller lock-x height="-155" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="100" v-show="todolist.length>0">
    <div>
      <div class="list-warp" v-for="item in todolist">
        <div class="list-ctx" @click="goDetail(item.BBillGuid)">
          <div class="head displayflex ft14">
            <p class="lft">
              {{item.BBillNo}}
            </p>
            <span class="tag f-l" v-if="item.StartBusTerminal">中转</span>
            <!--理赔-->
            <span class="tag notValid f-l" v-if="item.State=='82' && (item.InsuraceState == '' || item.InsuraceState == null)">保单未生效</span>
            <span class="tag claim f-l" v-if="item.State=='82' && item.ClaimState != '' && item.ClaimState != null">{{item.ClaimState | claimState}}</span>
            <!--理赔-->
            <span class="flex1 txt-rit">{{item.State | orderStateC}}</span>
          </div>
          <div class="grab-wrap">
            <div class="addr ft17"><span class="dotted"></span>{{item.DepartureProvince | province}}{{item.DepartureCity | city}}{{item.DepartureDistrict | district}}{{item.DepartureAddress}}</div>
            <div class="addr ft17" v-if="item.StartBusTerminal"><span class="iconfont icon-trans"></span>{{item.StartBusTerminal.replace(/\//g, "")}}</div>
            <div class="addr ft17"><span class="dotted org"></span>{{item.ArrivalProvince | province}}{{item.ArrivalCity | city}}{{item.ArrivalDistrict | district}}{{item.ArrivalAddress}}</div>
            <div class="statis ft14 displayflex">
              <span>共{{item.OrdersPKGS}}件</span>
              <div class="flex1 txt-rit">订单总费用<em class="org">￥</em><span class="price org ft16">{{(item.CarrierAmount + item.BusTicketAmount + item.InsuranceFee).toFixed(2)}}</span></div>
            </div>
            <div class="ft14" v-if="item.State=='11' || item.State=='44' || item.State=='51' || item.State=='12'">计划提货时间：<span class="org">{{item.CollectionTime | timeshort}}</span></div>
            <div class="ft14" v-if="item.State=='52' || item.State=='56' || item.State=='81'">实际取货时间：<span class="org">{{item.ConsignTime | timeshort}}</span></div>
             <div class="ft14" v-if="item.State=='11' || item.State=='52' || item.State=='51' || item.State=='12' || item.State=='44'">要求到达时间：<span class="org">{{item.LastArrivalArrivedDate | timeshort}}</span></div>
            <div class="ft14" v-if="item.State=='56' || item.State=='81'">实际送达时间：<span class="org">{{item.ArrivalDate | timeshort}}</span></div>
            <div class="ft14" v-if="item.State=='81'">实际签收时间：<span class="org">{{item.ReceiveTime | timeshort}}</span></div>
          </div>
          <div class="icon-tag" v-if="item.BBillType == 'B05'"><img src="~images/icon/emergent.png"></div>
        </div>
        <div class="list-btn">
          <div class="btn btn-sm" @click="Billing(item.BBillGuid, 10)" v-if=" showbtn==true &&  item.State =='11'">取消订单</div>
              <div class="btn btn-sm" @click="Billing(item.BBillGuid, 83)" v-if=" showbtn==true &&  item.State == '12' ||item.State == '44' ">取消订单</div>
          <div class="btn btn-sm" @click="goDetail(item.BBillGuid)">订单详情</div>
          <div class="btn btn-sm" @click="Billing(item.BBillGuid, 12,item.CarrierAmount,item.InsuranceFee)" v-if="item.State =='11' && showbtn==true">发单</div>
          <div class="btn btn-sm" @click="onlineOrder(item.BBillGuid)" v-if="item.State =='11' &&  showbtn==true">修改订单</div>
          <div class="btn btn-sm" @click="Echo(item.BBillGuid)" v-if="item.State =='81' &&  item.BackBillFlag !='S'">回  送</div>
          <div class="btn btn-sm" @click="map(item.BBillGuid)" v-if=" item.State =='52' || item.State =='56'">配送详情</div>
          <div class="btn btn-sm" @click="Signing(item.BBillGuid)" v-if="item.State =='56'">确认签收</div>
          <div class="btn btn-sm" @click="editTime(item.Guid,item.BBillGuid)" v-if="showbtn==true && item.State == '51' ">修改订单</div>
          <!-- <div class="btn btn-sm" @click="editTime(item.Guid,item.BBillGuid)" >修改预约时间</div> -->
          <div class="btn btn-sm" @click="remind(item.BBillGuid,item.BBillNo,item.CollectionTime,item.DepartureAddress)" v-if="item.State =='51' && showbtn==true">提醒取货</div>
          <div class="btn btn-sm" @click="Assess(item.BBillGuid)" v-if="item.State =='81' && item.IsEvaluated == 'N'">评价</div>
          <!--理赔申请-->
          <div class="btn btn-sm" v-if="item.State == '82' && item.InsuraceState == '1'" @click="goToClaim(item.BBillGuid)">申请理赔</div>
          <!--理赔申请-->
          
          
        </div>
      </div>
    </div>
    <p class="txt-bottom" v-if="totalLength == todolist.length && totalLength>3"><em class="txt">我是有底线的</em></p>
  </scroller>
  <div class="noDate_page" v-if="todolist.length<=0">
    <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
    未找到相关数据
  </div>
  <foot-box :status="2"></foot-box>
</div>
</template>

<script>
import footBox from "@/components/share/footerbox.vue";
import { fail } from "assert";
// import { stat } from 'fs';
export default {
  name: "orderList",
  components: {
    footBox
  },
  data() {
    return {
      todolist: [],
      query: {},
      bbillno: "",
      showLoad: false,
      selectedNum: 1,
      count: 0,
      pageindex: 1,
      totalLength: 0,
      showbtn: true
    };
  },
  computed: {
    userinfo() {
      if (localStorage.UserInfo) {
        return JSON.parse(localStorage.UserInfo);
      }
    }
  },
  created() {
    var type = this.$route.query.type;
    if (type) {
      this.goLink(type);
    } else if(sessionStorage.corderlistTab){
      this.goLink(sessionStorage.corderlistTab); 
    } else {
      this.goLink(1);
    }
  },
  watch: {
    bbillno(val) {
      if (!val) {
        this.resetGet();
      }
    }
  },
  methods: {
    editTime(guid, BBillGuid) {
      this.$router.push({
        path: "/editTime",
        query: { guid: guid, BBillGuid: BBillGuid }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    goLink(type) {
      this.todolist = [];
      this.query = {};
      this.selectedNum = type;
      sessionStorage.corderlistTab = type;
      if (type == "1") {
        this.query.State = "11";
        this.query.OrderBy = "1";
      } else if (type == "2") {
        this.query.State = "12,44,51";
        this.query.OrderBy = "1";
      } else if (type == "3") {
        this.query.State = "52";
        this.query.OrderBy = "2";
      } else if (type == "4") {
        this.query.State = "56";
        this.query.OrderBy = "3";
      } else if (type == "5") {
        this.query.State = "81";
        this.query.OrderBy = "4";
      } else if (type == "6") {
        this.query.State = "82";
        this.query.OrderBy = "5";
      }
      this.resetGet();
    },
    goDetail(guid) {
      this.$router.push({
        path: "/orderDetail",
        query: { id: guid }
      });
    },
    Assess(guid) {
      this.$router.push({
        path: "/serverAssess",
        query: { id: guid }
      });
    },
    resetGet() {
      this.todolist = [];
      this.count = 0;
      this.pageindex = 1;
      this.getData();
    },
    onScrollBottom() {
      this.count++;
      if (this.count == 1) {
        this.getData();
      }
    },
    getData() {
      var self = this;
      if (
        this.totalLength == this.todolist.length &&
        this.todolist.length > 0
      ) {
        return false;
      }
      this.showLoad = true;
      if (self.userinfo.UserBizType == "Cargowner") {
        self.query.CorpGuid = self.userinfo.CorpGuid;
      } else if (this.userinfo.UserBizType == "Cargoreceiver") {
        this.showbtn = false;
        this.query.CreateUserId = this.userinfo.StaffID;
        this.query.SendContactsTel = this.userinfo.LogonUser;
      } else if (this.userinfo.UserBizType == "warehouse") {
        this.query.CreateUserId = this.userinfo.StaffID;
        this.query.SendContactsTel = this.userinfo.LogonUser;
      } else {
        this.query.CreateUserId = this.userinfo.StaffID;
      }
      this.query.bbillno = this.bbillno;
      this.query.PageIndex = this.pageindex;
      this.query.PageSize = 8;
      this.Ajax.post("SearchOrderList", self.query).then(function(resp) {
        self.showLoad = false;
        if (resp.IsSuccess) {
          var result = resp.Datas;
          if (result.length > 0) {
            self.todolist = self.todolist.concat(result);
            self.pageindex++;
            self.count = 0;
          }
          self.totalLength = resp.TotalRecords;
          if (self.pageindex == 2) {
            self.$nextTick(() => {
              self.$refs.scrollerBottom.reset({
                top: 0
              });
            });
          }
        }
      });
    },
    Billing(id, state, fee, insFee) {
      var self = this;
      var txt, msg;
      if (state == 12) {
        txt = "发单成功";
        msg =
          "本次订单费用：<br/>运费 " +
          fee +
          "元<br/>保险 " +
          insFee +
          "元<br/>增值服务 0元<br/>总计" +
          (fee + insFee) +
          "元，确认下单吗？";
        this.$vux.confirm.show({
          title: "提示",
          content: msg,
          onConfirm() {
            self.showLoad = true;
            self.operationOrder(id, state, txt);
          }
        });
      }
      if (state == 10 || state == 83) {
        txt = "取消成功";
        this.$vux.confirm.show({
          title: "提示",
          content: "确定取消订单吗？",
          onConfirm() {
            self.showLoad = true;
            self.operationOrder(id, state, txt);
          }
        });
      }
    },
    //提醒取货
    remind(guid, billno, time, address) {
      this.showLoad = true;
      time = time ? time.replace("T", " ") : "";
      var self = this;
      var query = {
        StaffID: self.userinfo.StaffID,
        title: "货主等着有些着急了！",
        content: "货主已经开始催促，请尽快赶往提货地点取货，以免影响准点率。",
        BBillGuid: guid,
        BBillNo: billno,
        ByTime: "需在" + time + "前到" + address + "提货",
        magType: "1",
        wxurl: "login"
      };
      this.Ajax.post("RemindingQH", query).then(function(resp) {
        self.showLoad = false;
        if (resp.IsSuccess) {
          self.$vux.toast.show({
            type: "text",
            width: "auto",
            text: "已提醒送货员尽快取货！"
          });
          //self.todolist = resp.Datas;
        } else {
          self.$vux.toast.show({
            type: "text",
            width: "auto",
            text: "操作失败！"
          });
        }
      });
    },
    //配送详情
    map(guid) {
      this.$router.push({
        path: "/map",
        query: { id: guid }
      });
    },
    operationOrder(id, state, txt) {
      var self = this;
      var query = {
        Guid: id,
        State: state,
        LoginedStaffID: this.userinfo.StaffID,
        LoginedName: this.userinfo.Name
      };
      this.Ajax.post("Billing", query).then(function(resp) {
        self.showLoad = false;
        if (resp.IsSuccess) {
          self.resetGet();
          self.$vux.toast.show({
            type: "success", //success, warn, cancel, text
            text: txt
          });
        } else {
          self.resetGet();
          self.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.ErrorMessage
          });
        }
      });
    },
    selectDriver(guid) {
      this.$router.push({
        path: "/driverList",
        query: { id: guid }
      });
    },
    Signing(guid) {
      this.$router.push({
        path: "/sign",
        query: { id: guid }
      });
    },
    Echo(guid) {
      sessionStorage.clear();
      this.$router.push({
        path: "/onlineOrder",
        query: { id: guid, Billtype: "2" }
      });
    },
    onlineOrder(guid) {
      sessionStorage.clear();
      this.$router.push({
        path: "/onlineOrder",
        query: { id: guid, Billtype: "1" }
      });
    },
    goToClaim(BBillGuid) {
      this.$router.push({
        path: "/claim",
        query: { id: BBillGuid }
      });
    },
  }
};
</script>